<template>
  <div class="app-container">
      <el-form
        ref="dataForm"
        :model="temp"
        :rules="rules"
        label-position="right"
        label-width="150px"
        style="width: 700px; margin:0 auto;margin-top:5%"
      >
        <el-form-item label="每天签到次数限制：" prop="signLimitOntDay">
          <el-input placeholder="请输入每天可签到次数" v-model="temp.signLimitOntDay" style="width:500px;float:left"/>
          <p style="float:left"> 次</p>
        </el-form-item>
        <el-form-item label="签到周期:" prop="signCycle">
          <el-input placeholder="请输入签到周期限制" v-model="temp.signCycle" style="width:500px;float:left"/>
          <p style="float:left"> 天</p>
        </el-form-item>
        <el-form-item label="初始奖励:" prop="initReward">
          <el-input placeholder="请输入签到周期第一天奖励小康币金额" v-model="temp.initReward" style="width:500px;float:left"/>
        </el-form-item>
        <el-form-item label="奖励规则配置" prop="awardNum">
            <el-input placeholder="请输入奖励依次倍数" v-model="temp.awardNum" style="width:350px;float:left"/>
            <el-select
                placeholder="请选择"
                clearable
                class="filter-item"
                style="width: 150px;margin-left:2%"
                v-model="temp.awardRules"
            >
                <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
            </el-select> 
        </el-form-item>
        <el-form-item label="满周期额外奖励:" prop="addtionalAward">
          <el-input placeholder="请输入签到每满一周期额外奖励小康币金额" v-model="temp.addtionalAward" />
        </el-form-item>
        <el-form-item label="满周期后奖励:" prop="postAward">
          <el-input placeholder="请输入签到周期结束后每天奖励小康币金额" v-model="temp.postAward" />
        </el-form-item>
        <el-form-item label="签到说明描述:" prop="remark">
          <el-input placeholder="请输入签到规则说明" type="textarea" v-model="temp.remark" />
        </el-form-item>
      </el-form>
      <el-button
        size="medium"
        class="filter-item"
        type="success"
        style="display:block;margin:0 auto"
        @click="signIn"
      >
        保存并发布
      </el-button>
  </div>
</template>

<script>
// 异步请求 delLly
import Vue from 'vue'
import { getData,update } from '@/api/signIn/index'
const calendarTypeOptions = [
  { key: 'INCREASE', display_name: '依次递增' },
  { key: 'MULTIPLE', display_name: '依次成倍' },
]
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  inject:["reload"],
  filters: {
    typeFilter(type) {
      return calendarTypeKeyValue[type]
    },
  },
  data() {
    return {
      calendarTypeOptions,
      temp: {
      },
      rules:{
          signLimitOntDay:[{
              required: true, message: '不能为空且必须为数字'
          }],
          signCycle:[{
              required: true, message: '不能为空且必须为数字'
          }],
          initReward:[{
              required: true, message: '不能为空且必须为数字'
          }],
          awardNum:[{
              required: true, message: '不能为空'
          }],
          addtionalAward:[{
              required: true, message: '不能为空且必须为数字'
          }],
          postAward:[{
              required: true, message: '不能为空且必须为数字'
          }],
          remake:[{
              required: true, message: '不能为空'
          }],
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList(){
        getData().then(res=>{
            this.temp=res.data
        })
    },
    signIn(){
        update(this.temp).then(res=>{
            if(res.code==='200'){
                this.$notify({
                    title: '成功',
                    message: '修改成功',
                    type: 'success',
                    duration: 2000
                })
                this.getList()
            }else{
                this.$notify({
                    title: '失败',
                    message: '修改失败',
                    type: 'danger',
                    duration: 2000
                })
                this.getList()
            }
        })
    }
  }
}
</script>
<style>
</style>
